<style type="text/css">
		#selectImg{
			width:200px;
			height:25px;
			float:left;
			border:1px solid #bbbbbb;
			background-repeat:no-repeat;
			background-position:right;
		}
		#selectBox{
			overflow:visible;
			font-size:13px;
		}
		#selectMenu{
			display:none;
			margin:0;
			padding:0;
			list-style:none;
			border:1px solid #bbbbbb;
			width:200px;
			clear:left;
			float:left;
			background-color:white;
		}
		#selectText{
			width:169px;
			border:0px;
			float:left;
			padding-left:4px;
		}
		#selectControl{
			float:left;
			border:1px;
			overflow:scroll;
		}
    </style>
<script type="text/javascript">
//事件绑定
Function.prototype.bindEvent=function(object,newPara){
    var __method=this;
    return function(event){
        __method.call(null,event||window.event,object,newPara);//null直接调用方法，event||window.event,object,newPara为参数
		return null;
    }
}
/*
  * 取值，使用document.getElementById('SelectHideValueText')取得多选框列表选中的值
  * 构造函数
　*	@param elem				Div对象。
　*	@param width			下拉多选列表框宽度。
　*	@param menuName			显示内容数组（与数据值数组一一对应）。
　*	@param menuValue		数据值数组。
　*	@param splitSign		列表框值之间的分隔符（默认为0x11）。
*/
SelectBox = function(elem,width,obj,splitSign){
	if(!elem){
		alert("请输入第一个参数：Div对象！");
		return false;
	}
	this._elem = elem;
	if(!width){
		alert("请输入第二个参数：宽度属性！");
		return false;
	}
	this._width = width;

	//取出SELECT对象中的值
	
	var arrText = new Array();
	var arrValue = new Array();
	
	obj.style.display='none';
	
	for(var i = 0; i < obj.options.length; i++){
		if(obj.options[i].text!=""){
	arrText [arrText .length] = obj.options[i].text;
	arrValue[arrValue.length] = obj.options[i].value;
		}
	}
	
	this._menuName = arrText;
	this._menuValue = arrValue;
	
	//属性
	this._splitSign = ",";
	this._clickNum = 0;
	this._selectArray = new Array();//存放选中的下拉列表内容
	this._selectValueArray = new Array();//存放选中的下拉列表值
	this._hideTextType = "hidden";//隐藏文本框的类型可为text，默认为隐藏(hidden)测试使用 id:SelectHideValueText
	if(splitSign != null){
		this._splitSign = splitSign;
	}
	this._getClickNum = function(){
		return this._clickNum;
	}
	this._setClickNum = function(num){
		this._clickNum = num;
	}	
	this._getSelectArray = function(){
		return this._selectArray;
	}
	this._setSelectArray = function(array){
		this._selectArray = array;
	}
	
	this._getSelectValueArray = function(){
		return this._selectValueArray;
	}
	this._setSelectValueArray = function(array){
		this._selectValueArray = array;
	}
	
	//getClickNum : function(){} 与以前定义有什么不同
	
	this._buildSelectBox();	
	
}
//判断是否选中，将选中的值存入数组
//e:触发的事件，obj selectBox对象，para 触发事件的对象
//使用call方法时改变了this的指向
SelectBox.prototype._selectBoxCheck = function(e,obj,para){
	//得到存放文本框显示内容的数组
	var selectArray = obj._getSelectArray();
	var selectValueArray = obj._getSelectValueArray();
	//得到选中值对应的内容名
	var name = obj._getNameUseValue(para.value);
	if(para.checked == true){
		selectArray.push(name);
		selectValueArray.push(para.value);
		obj._showSelectArray();
	}else if(para.checked == false){//将取消选择的值从数组中删除
		obj._deleteFromSelectArray(name,para.value);
		obj._showSelectArray();
	}
	obj._setSelectArray(selectArray);
	obj._setSelectValueArray(selectValueArray);
}
//用指定的值从内容数组中得到对应的内容
SelectBox.prototype._getNameUseValue = function(value){
	var menuValue = this._menuValue;
	var menuName = this._menuName;
	for(var i=0;i<menuValue.length;i++){
		if(menuValue[i] == value){
			return menuName[i];
		}
	}
}
//从数组中删除指定元素
SelectBox.prototype._deleteFromSelectArray = function(name,value){
	var selectArray = this._getSelectArray();
	var selectValueArray = this._getSelectValueArray();
	for(var i=0;i<selectArray.length;i++){
		if(selectArray[i] == name){
			//删除指定元素，将后面元素向前移动1位
			for(var j=i;j+1<selectArray.length;j++){
				selectArray[j] = selectArray[j+1];
				selectValueArray[j] = selectValueArray[j+1]
			}
			selectArray.pop();
			selectValueArray.pop();
			return;
		}
	}
	this._setSelectArray(selectArray);
	this._setSelectValueArray(selectValueArray);
}
//得到数组中所有的值（选中的值），显示在文本框上
SelectBox.prototype._showSelectArray = function(){
	//临时变量，存放要显示在文本框上的内容
	var finalTxt = '';
	var finalValue = '';
	var selectArray = this._selectArray;
	var selectValueArray = this._selectValueArray;
	var splitSign = this._splitSign;
	if(selectArray.length == 0){
		finalTxt = '请选择';				
		document.getElementById("selectText").value = finalTxt;
		document.getElementById("SelectHideValueText").value = finalValue;
		return;
	}
	for(var i=0;i<selectArray.length;i++){
		if(i != 0){
			finalTxt += ",";
			finalValue += splitSign;
		}
		finalTxt += selectArray[i]
		finalValue += selectValueArray[i];
	}
	document.getElementById("selectText").value = finalTxt;
	document.getElementById("SelectHideValueText").value = finalValue;
}
//e调用方法时传来的事件，obj调用方法时传来的SelectBox对象
SelectBox.prototype._selectOnClick = function(e,obj){
	var menu = document.getElementById("selectMenu");
	var img = document.getElementById("selectImg");
	var clickNum = obj._getClickNum();
	
	//clickNum为偶数显示下拉框
	if(clickNum%2 == 0){
		
		img.style.backgroundImage =obj._getImgPath("2");				
		menu.style.display = "block";
		obj._changImg(obj._getImgPath("1"));
	}else{
		img.style.backgroundImage = obj._getImgPath("2");
		menu.style.display = "none";
		obj._changImg(obj._getImgPath("1"));
	}	
	//clickNum到达10000就置0
	if(clickNum == 10000){
		clickNum = 0;
	}
	clickNum++;
	obj._setClickNum(clickNum);
}
//下拉按钮改变背景
SelectBox.prototype._changImg = function(imgurl){
	//延迟0.1秒显示背景
	setTimeout(function(){
						var img = document.getElementById("selectImg");
						img.style.backgroundImage = imgurl;
				},100);
}
//当鼠标移出下拉多选框时触发
SelectBox.prototype._selectBoxMouseOut = function(even,obj){
	var selectBox = document.getElementById("selectBox");
	var menu = document.getElementById("selectMenu");
	var selectImg = document.getElementById("selectImg");
	var e = even || window.event;
	var targetDom = e.toElement || e.relatedTarget;	
	var clickNum = obj._getClickNum();
	//当鼠标点击到子元素中时，targetDom = 此子元素的父元素，直到找到需要定义方法的父元素
	while(targetDom && targetDom != selectBox){
		targetDom = targetDom.parentNode;
	}
	if(!targetDom){
		if(clickNum%2 == 1){
			menu.style.display = "none";
			obj._changImg(obj._getImgPath("1"));
			clickNum++;
		}
	}
	obj._setClickNum(clickNum);
}
//建立多选下拉框列表
SelectBox.prototype._buildSelectBox = function(){
	var elem = document.getElementById(this._elem);
	var width = this._width;
	var menuName = this._menuName;
	var menuValue = this._menuValue;
	//建立头div
	
	var selectBox_div = document.createElement("div");
	elem.insertBefore(selectBox_div,null);	
	selectBox_div.id = "selectBox";
	selectBox_div.onmouseout = this._selectBoxMouseOut.bindEvent(this);
	//建立模拟下拉框div
	var selectImg_div = document.createElement("div");
	selectBox_div.insertBefore(selectImg_div,null);
	selectImg_div.id = "selectImg";
	selectImg_div.onclick  = this._selectOnClick.bindEvent(this);
	
	//设置下拉框DIV背景图片
	img=document.getElementById("selectImg");	
	img.style.backgroundImage =this._getImgPath("1");
	
	//--建立文本框
	var selectTxt_input = document.createElement("input");
	selectTxt_input.type = "text";
	selectImg_div.insertBefore(selectTxt_input,null);
	selectTxt_input.value = "请选择"
	selectTxt_input.id = "selectText";
	//建立多选框内容列表ul
	var selectMenu_ul = document.createElement("ul");
	selectBox_div.insertBefore(selectMenu_ul,null);
	selectMenu_ul.id = "selectMenu";
	//selectMenu_ul.onmouseout = function(){alert("")}	
	
	//--创建li
	for(var i=0;i<menuName.length;i++){
		var selectMenu_li = document.createElement("li");
		selectMenu_ul.insertBefore(selectMenu_li,null);
		//----创建checkbox
		var selectMenu_checkbox = document.createElement("input");
		selectMenu_checkbox.type = "checkbox";
		selectMenu_checkbox.value = menuValue[i]; 
		//前一个this为selectBox对象，后一个selectMenu_checkbox为方法的参数
		selectMenu_checkbox.onclick = this._selectBoxCheck.bindEvent(this,selectMenu_checkbox);
		selectMenu_li.insertBefore(selectMenu_checkbox,null);
		//----创建span内含文字
		var selectMenu_span = document.createElement("span");
		selectMenu_li.insertBefore(selectMenu_span,null);
		selectMenu_span.innerHTML = menuName[i];
	}
	//--建立隐藏文本框，用于存放选择的值
	var selectTxt_hideinput = document.createElement("input");
	selectTxt_hideinput.type = this._hideTextType;
	selectBox_div.insertBefore(selectTxt_hideinput,null);
	selectTxt_hideinput.id = "SelectHideValueText";

	
}
//重置多选下拉框列表中的选项
SelectBox.prototype._changeSelectBox = function(menuName,menuValue){
	this._menuName = menuName;
	this._menuValue = menuValue;
	var elem = document.getElementById(this._elem);
	elem.innerHTML = "";
	this._buildSelectBox();	
}


//获取当前地址用于加载图片
SelectBox.prototype._getImgPath = function(i){
//获取当前网址，如： http://localhost:8081/prototype/login.jsp
//var curWwwPath=window.document.location.href;
//获取主机地址之后的目录，如： /prototype/login.jsp
var pathName=window.document.location.pathname;
//var pos=curWwwPath.indexOf(pathName);
//获取主机地址，如： http://localhost:8081
//var localhostPaht=curWwwPath.substring(0,pos);
//获取带"/"的项目名，如：/prototype
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
if(i=="1"){
	var imgPath="url("+projectName+"/images/dropDown1.jpg)";	}
if(i=="2"){
	var imgPath="url("+projectName+"/images/dropDown2.jpg)";
}    
return imgPath;
}
</script>